<template>
  <a-form-item :name="formNamePath" :label="formItem.label" :rules="[formItem.rule]" :extra="formItem.extra"
    :style="{ marginLeft: formItem.marginLeft + 'px' }" :class="formItem.associated
      ? 'form-a-radio-group_associated'
      : 'form-a-number-input'
      ">
    <span class="beforeText upload-pic" v-if="formItem.beforeText">{{
      formItem.beforeText
    }}</span>
    <span class="ant-upload-picture-card-wrapper avatar-uploader" @click="(isVisible = true) && (fileList = [])">
      <div class="ant-upload-list ant-upload-list-picture-card">
        <div class="ant-upload ant-upload-select"><span tabindex="0" class="ant-upload" role="button">
            <button class="ant-btn upload_button_line" type="button"
              :disabled="formItem.maxCount ? formItem.value.length >= formItem.maxCount : false"
              ant-click-animating-without-extra-node="false"><!---->
              <upload-outlined></upload-outlined>
              <span class="iconfont icon-upload">
              </span>
              <span>选择文件</span>
            </button>
          </span>
        </div>
      </div>
    </span>
    <!-- 上传会回显列表，其实把上传组件的点击上传隐藏掉了 -->
    <a-form-item-rest>
      <fileUpload :fileList="formItem.value" :multiple="formItem.multiple" @uploadFinished="uploadFinished" @draggChangeFinished="draggChangeFinished"
        @upload_remove_Finished="upload_remove_Finished" :maxCount="formItem.maxCount" :accept="formItem.accept"
        :title="formItem.uploadTitle" :isAutoUpload="true" @setFileSecret="setFileSecret" @fileNameChange="fileNameChange" :showCard="false">
      </fileUpload>
    </a-form-item-rest>
    <div class="help-msg" v-if="formItem.helpMsg">
      {{ formItem.helpMsg }}
    </div>
  </a-form-item>
  <uploadDialong @uploadFinished="handleConfirm" @handleCancle="isVisible = false" :isVisible="isVisible"
    @dislogVisible="dislogVisible" uploadType="attachment"
    :maxCount="formItem.maxCount ? (formItem.maxCount - formItem.value.length) : 100000000">
  </uploadDialong>
</template>

<script lang="ts" setup>
import fileUpload from "@/components/uploadDialog/fileUpload.vue";
import uploadDialong from "@/components/uploadDialog/uploadDialong.vue";
import { ref, reactive, watch, computed } from "vue"
import { dataSourceType } from "@/type.d";
import { useColumnItem } from '@/components/draggable/hooks/useColumnModel';
//props
const props = defineProps({
  formItem: {
    type: Object,
    default: {} as dataSourceType,
  },
  formNamePath: [],
});

const emit = defineEmits(["changeImg", "removeFinished"]);
const formItem = ref(props.formItem as any);
const fileList = ref([]);
useColumnItem(computed(() => props.formItem), formItem)

// 上传图片
const uploadFinished = (data: any, id: any) => {
  formItem.value.value.push(...data);
};
//模态框
const isVisible = ref(false);
// 删除图片
const upload_remove_Finished = (data: any) => {
  formItem.value.value.forEach((item: any, index: number) => {
    if (item.id == data.id) {
      formItem.value.value.splice(index, 1,)
    }
  });
};
const fileNameChange = (val: any) => {
  formItem.value.value = val
};
// 拖拽排序完成之后
const draggChangeFinished = (data: any) => {
  formItem.value.value = [];
  formItem.value.value.push(...data);
};
// 模态框上传附件
const handleConfirm = (html: any, data: any) => {
  formItem.value.value.push(...data);

  //isVisible.value = false;
}
// 附件密级
const setFileSecret = (id: any, data: any) => {
  formItem.value.value.forEach((item: dataSourceType, index: any) => {
    if (item.id == id) {
      formItem.value.value[index] = JSON.parse(JSON.stringify(data));
    }
  });
}
const dislogVisible = (val: any) => {
  console.log(isVisible.value, 'isVisible.value')
  isVisible.value = val;
}
</script>

<style lang="less" scoped>
.help-msg {
  margin-top: 8px;
  font-size: 12px;
  font-family: PingFang SC-Regular, PingFang SC;
  font-weight: 400;
  color: rgba(0, 0, 0, 0.45);
  line-height: 20px;
}

.ant-upload-picture-card-wrapper {
  width: auto;
}
</style>
